{% extends 'magicbook/base.html' %}

{% block title %}
extend page
{% endblock %}


{% block css %}
<!-- Bootstrap-3.3.4 css -->
<!-- <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="../../static/css/bootstrap.min.css" rel="stylesheet">

<style>
    .addform {
        border: solid;
        padding-left: 5px;
        padding-right: 5px;
        width: 500px;
        height: 300px;
        position: fixed;
        margin:auto;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background-color:silver;
        opacity: 90%;
    }
    .nodisplay {
        display: none;
    }
    
</style>

{% endblock %}


{% block content %}
<div align="right">
    <input type="text" placeholder="pls enter target" style="width: 200px;">
    <button id="search" type="button" class="btn btn-primary" style="padding: 2px;">搜索</button>
    <button id="add" type="button" class="btn btn-primary" style="padding: 2px;">添加target</button>
</div>
<table class="table table-striped" style="margin: 0px; padding: 0px;">
    <thead>
        <tr>
          <th>#</th>
          <th>target</th>
          <th>数据中心</th>
          <th>监控类型</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>host01:port</td>
          <td>test</td>
          <td>node-exporter</td>
          <td>
            <button id="edit" type="button" class="btn btn-default .btn-sm" disabled="disabled" style="margin: 0%;padding-left: 2px;padding-right: 2px;padding-top: 0px;padding-bottom: 0px;">编辑</button>
            <button id="delete" type="button" class="btn btn-default .btn-sm"  style="margin: 0%;padding-left: 2px;padding-right: 2px;padding-top: 0px;padding-bottom: 0px;">删除</button>
          </td>
        </tr>
      </tbody>
</table>
<div class="container">
    <div class="myPagination">
    </div>
</div>

<!-- 新增target的表单 -->
<div class="addform nodisplay">
    <div>
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 align="center">add target</h4>
    <div>
    <form action="/v1/operator/instence" method="post">
        <div class="form-group">
          <label for="exampleInputEmail1">target</label>
          <input type="text" class="form-control" id="exampleInputEmail1" name="target" placeholder="target">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">数据中心</label>
          <input type="text" class="form-control" name="__meta_datacenter" placeholder="数据中心">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">监控类型</label>
            <input type="text" class="form-control" name="__meta_prometheus_job" placeholder="监控类型">
          </div>
        <button type="submit" class="btn btn-default" style="position: relative; left: 42%;">Submit</button>
      </form>
</div>

{% endblock %}


{% block js %}
<script src="../../static/js/Pagination.js"></script>
<script src="../../static/js/core.js"></script>
{% endblock %}

